42 Body Text Colors and Background
The default text and background colors:
- Body text color:
#5c5859 - Background color:
#fff(white) - Heading color:
$blue(#00817c)
Subtitle here
This is my first slide content
These are speaker notes for the first slide. They will be visible in a separate window when presenting. They will also be visible in a separate section on the website when the presentation is published.
Here are detailed notes about bullet point 1. Additional context for bullet point 2. Important information related to bullet point 3.
The .poll class now has an automatic FontAwesome chart icon:
Poll Question: Which icon style do you prefer?
To use a different icon, modify the CSS content property: {{< fa chess-pawn >}}
.reveal .slide .poll::before {
content: "\f201"; /* Chart icon */
}You can replace "\f201" with any other FontAwesome icon code:
\f0e0 - Envelope\f024 - Flag\f0eb - Lightbulb\f059 - Question Circle\f5da - Vote Yea\f086 - Comments\f521 - CrownKnowledge Check: What makes FontAwesome work in Quarto?
You can also manually insert icons anywhere using HTML:
We load FontAwesome in the document header:
include-in-header:
text: |
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">We use CSS to add the icon automatically:
.poll::before {
font-family: "Font Awesome 6 Free";
content: "\f201";
/* positioning styles */
}To find other icon codes:
\f201You can also create your own icon classes:
.icon-warning::before {
font-family: "Font Awesome 6 Free";
font-weight: 900;
content: "\f071";
color: $orange;
margin-right: 0.5em;
}Then use <span class="icon-warning">Warning text</span>
Font Awesome icons can be customized:
Extra Small
Small
Regular
Large
2x
3x
FontAwesome also supports stacked and transformed icons:
Text
text3
text4
This presentation uses:
The theme defines these colors:
#bf2642): ■■■■#f2a03d): ■■■■#02733e): ■■■■#73245e): ■■■■#00817c): ■■■■#f8f5f0): ■■■■This is a question box with blue left border and light blue background. It’s perfect for rhetorical questions or discussion prompts.
Poll Question: Which of these features do you find most useful?
This is an “appex” box with dark blue left border and light blue background. Great for examples, applications, or extending ideas.
This is a blockquote styled with the Nanum Myeongjo font. Notice the elegant serif style and slight color contrast. Ideal for emphasizing important quotes or statements.
This is a Big Adage - 250% font size in Amatic SC
This is a Small Adage - 150% font size in Amatic SC
Block Element (Span)
Inline Element (Span)
Regular text size (default)
This text is displayed with the “small” class (75% of normal size).
# A Python code block with custom styling
def hello_world():
"""This demonstrates the code block styling"""
return "Hello, World!"
# Notice the beige background and purple text
for i in range(5):
print(f"Count: {i}")This is an inverse box which has a colored background and white text.
This content is vertically and horizontally centered in the slide. Perfect for emphasizing a single important point.
| Element | Description | Use Case |
|---|---|---|
.question |
Blue-bordered box | Discussion questions |
.poll |
Orange-bordered box | Interactive polls or quizzes |
.appex |
Blue background box | Applications and examples |
.bigadage/.smalladage |
Special Amatic SC font | Memorable statements |
.block-el/.inline-el/.meta-el |
Color-coded elements | Visual differentiation |
.small |
Reduced text size | Less important content |
.v-center-container |
Centered content | Emphasis on key points |
.inversebox |
Colored background text | Stand-out statements |
.title-slide class)The main title slide (first slide) has special styling that includes centered text, specific font choices, and careful spacing.
# This code block demonstrates:
# - Beige background (#f8f5f0)
# - Purple code text (#73245e)
# - Dark beige border (#9f8e71)
# - 0.8em font size
# - 6px by 9px padding
# - Max height of 600px
data <- read.csv("example.csv")
ggplot(data, aes(x = x, y = y)) +
geom_point(color = "#bf2642") +
theme_minimal() +
labs(title = "Example Plot")This demonstrates the light orange background created using:
$light-orange: lighten($orange, 60%);Great for highlighting content without being too intense.
This text uses the dark purple color variable:
$dark-purple: #39122f;The header logo is styled with:
.reveal-header .header-logo {
height: .55em;
cursor: pointer;
}It appears at the top of each slide, sized at 0.55em height.
The theme hides slide numbers on the title slide:
.reveal .slide-number > a[href*='title-slide'] {
display: none;
}CSS custom properties defined at the root:
:root {
--red-100: #bf2642;
--orange-100: #f2a03d;
--green-100: #02733e;
--purple-100: #73245e;
}The base font size is set to:
$presentation-font-size-root: 46px;This impacts all relative sizing throughout the presentation.
Code blocks have custom styling:
.reveal pre.sourceCode code {
// Specific styling for source code blocks
// Including background color, padding, and height constraints
}These commented-out sections represent alternative styling options that are currently disabled:
/*
.reveal .slide .poll::before {
// Font Awesome icon styling that's currently disabled
}
*/
/*
.reveal .slide h1 {
font-family: 'Nanum Myeongjo', serif;
}
*/
/*
.slide-background.center.present {
background-color: #f8f5f0;
}
*/These commented options show alternative title slide styling:
/*
#title-slide {
text-align: left;
font-family: 'Nanum Myeongjo', serif;
margin: 5em 0em 0em 0em;
}
*/
/*
#title-slide p.author::before {
content: "";
display: block;
border: none;
background-color: $body-color;
color: $body-color;
height: 3px;
margin-bottom: 1em;
}
*/The default text and background colors:
#5c5859#fff (white)$blue (#00817c)Your CSS is organized into:
| Name | Hex Code | Variable | Sample |
|---|---|---|---|
| Red | #bf2642 | $red / –red-100 | ■■■ |
| Orange | #f2a03d | $orange / –orange-100 | ■■■ |
| Green | #02733e | $green / –green-100 | ■■■ |
| Purple | #73245e | $purple / –purple-100 | ■■■ |
| Dark Purple | #39122f | $dark-purple | ■■■ |
| Blue | #00817c | $blue | ■■■ |
| Beige | #f8f5f0 | $beige | ■■■ |
| Dark Beige | #9f8e71 | $dark-beige | ■■■ |
| Body Color | #5c5859 | $body-color | ■■■ |
| Selector | Purpose | CSS Variables Used |
|---|---|---|
| .question | Discussion prompts | Blue border, light blue background |
| .poll | Interactive questions | Orange border, beige background |
| .appex | Examples | Dark blue border, light blue background |
| .bigadage | Bold statements | Amatic SC font, 250% size |
| .smalladage | Secondary statements | Amatic SC font, 150% size |
| .block-el | Block elements | Green or white on green |
| .inline-el | Inline elements | Red or white on red |
| .meta-el | Meta elements | Orange or white on orange |
This presentation, combined with the previous one, demonstrates all styling elements from your custom CSS, including:
You now have a complete reference for your custom Quarto theme.
You can provide set up for the code as if it is a normal slide.
What is your favorite color?
A. Red
B. Green
C. Blue